<template>
    <div id="apparea" class="translist anipage">
        <pageheader :showback="false" :fixed="false">
			<template slot="left">
			    <p class="nav_slot"><span>{{datalist.length>0?('数量: '+datalist.length+'个'):''}}</span></p>
			</template>
            <template slot="title">
                <p class="nav_slot" @click="choosedate"><van-icon class="vanicon" name="notes-o" /> <span>{{selectdate}}</span></p>
            </template>
        </pageheader>
        <div class="scroll_wrap">
            <van-list
                v-model="isUpLoading"
                :finished="upFinished"
                :immediate-check="false"
                :offset="20"
                :finished-text="datalist.length>5?'我是有底线的':''"
                @load="onLoadList">
                <div class="list_wrap" v-for="(item,index) in datalist" :key="index">
                    <trans-item :transitem="item" :numindex='index'></trans-item>
                </div>
                <van-empty v-if="datalist.length==0" description="暂无相关数据" />
            </van-list>
        </div>
        <van-popup v-model="datePicker" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            @confirm="onPickerConfirm"
            title="选择年月日"
            :min-date="minDate"
          />
        </van-popup>
    </div>
</template>

<script>
import pageheader from "@/components/public/pageheader.vue";
import TransItem from "./trans-item.vue";
import animationminx from "@/mixins/animationminx.js";
import { mapState } from "vuex";
export default {
    name: "translist",
    components: {
        "trans-item":TransItem,
        pageheader
    },
    mixins: [animationminx],
    data() {
        return {
            datalist:[],
            isUpLoading:false,
            upFinished:false,
            nowpage:1,
            totalpage:1,
            selectdate:'',
            datePicker:false,
            minDate: new Date(2000, 0, 1),
            currentDate: new Date(),
        }
    },
    computed:{
        ...mapState({
            openid: state=>state.user.token,
			account: state=>state.user.account
        })
    },
    methods:{
        /**
         * @param {Object} refresh
         * 加载数据列表
         */
        onLoadList:function(){
          var _this = this;
          // if(this.nowpage>this.totalpage)
          // {
          //   this.$toast('没有更多数据了');
          //   this.isUpLoading=false;
          //   this.upFinished=true;
          //   return false;
          // }else{
          //   this.nowpage++;
          // }
          // this.getdatalist();
        },
        getdatalist:function(){
            var _this=this;
            var loading = this.$toast.loading({
              duration:60000,
              message: '加载中...',
              forbidClick: true,
              loadingType: 'spinner'
            });
            this.axios.post('/home/getTransList',{date:this.selectdate}).then(res=>{
                loading.clear();
                if(res.errno==0)
                {
                    var datalist= res.data;
                    _this.datalist=datalist;
                    _this.isUpLoading=false;
                    _this.upFinished=true;
                }else{
                    _this.isUpLoading=false;
                    _this.upFinished=true;
                    _this.datalist=[];
                    _this.$toast.fail(res.errmsg);
                }
            }).catch(err=>{
                _this.isUpLoading=false;
                _this.upFinished=true;
                loading.clear();
                _this.$toast.fail('获取数据失败');
            })
        },
        /**
         * 弹出日期选择
         */
        choosedate:function(){
            this.datePicker=true;
        },
		clearfilter:function(){
			this.selectdate='';
            this.datalist=[];
		},
        /**
         * 日期选中回调
         */
        onPickerConfirm:function(val){
            this.selectdate=this.globalfunc.dateFormat(val,'yyyy-MM-dd');
            this.datePicker=false;
            this.getdatalist();
        }
    },
    mounted:function(){
		if(!this.openid)
		{
			this.$router.push({
				path:'/login?redirect=translist'
			})
			return;
		}else{
			var _this=this;
			var loading = this.$toast.loading({
			  duration:60000,
			  message: '加载中...',
			  forbidClick: true,
			  loadingType: 'spinner'
			});
			this.axios.get('/home/getUserInfo').then((res)=>{
			    loading.clear();
			    if(res.errno==0)
			    {
					var account = res.data;
			        _this.$store.commit('user/setAccount',account);
					/**
					 * 默认加载今天的数据
					 */
					_this.selectdate=_this.globalfunc.dateFormat(new Date(),'yyyy-MM-dd');
					_this.getdatalist();
			    }else{
				   _this.$toast('当前账户尚未绑定,即将进行绑定');
				   setTimeout(function(){
					   _this.$router.push({
							path:'/login?redirect=translist'
					   })
				   },1000)
			    }
			}).catch((err)=>{
			    loading.clear();
			    _this.$toast.fail('获取数据失败');
			})
		}
    },
    activated:function(){
        
    }
    
};
</script>

<style lang="less" scoped>
.translist{
    width: 100%;
    height: auto;
    .nav_slot{
        font-size: 0px;
        color: #333;
        line-height: 1.4;
        span{
            font-size: .36rem;
            display: inline-block;
            vertical-align: middle;
            margin-top: 1px;
        }
        .vanicon{
            font-size: .46rem;
            vertical-align: middle;
            display: inline-block;
            color: #777;
            margin-right: 2px;
        }
    }
	.filter{
		width: 100%;
		height: 1rem;
		font-size: .32rem;
		text-align: left;
		box-sizing: border-box;
		line-height: 1rem;
		padding-left: .4rem;
		background-color: #fff;
		.vtag{
			margin-left: .2rem;
		}
	}
    .scroll_wrap{
        width:100%;
        height: auto;
        background-color: #f5f5f5;
        min-height: 90vh;
        .list_wrap{
            padding: 2px .2rem;
        }
    }
}
</style>
